
import { useAppContext } from "@/components/AppContext"
import { Message } from "@/types/chat"
import { useEffect, useState } from "react"
import { SiOpenai } from "react-icons/si"
import Markdown from "react-markdown"
export default function MessageList() {
    const {
      state: { messageList }
    } = useAppContext()
  //  const [messages, setMessages] = useState<Message[]>([])
    return (
        <div className="w-full pt-10 pb-48 dark:text-gray-300">
          <ul>
            {
               messageList.map((message) => {
                const isUser = message?.role === 'user'
                return <li 
                  key={message?.id}
                  className={`${isUser ? "bg-white" : "bg-gray-50"}`}
                
                >
                  <div className="w-full  max-w-4xl mx-auto flex space-x-6 px-4 py-6 text-lg">
                    <div className="text-3xl leading-[1]">
                      {
                         isUser ? "😊" : <SiOpenai />
                      }
                    </div>
                    <div className="flex-1">
                      <Markdown>{message?.content}</Markdown>
                    </div>
                  </div>
                </li>
               })
            }
          </ul>
        </div>
    )
}